<!DOCTYPE html>
<html>

<head>
    <meta charset="utf8" />
    <title>算子数据映射</title>
    <link rel="stylesheet" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/rappid.css" />
    <!-- <link rel="stylesheet" type="text/css" href="./css/data-mapping.css" /> -->
    <style>
        html,
        body,
        #PararegulTree {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            border: none;
            overflow-x: hidden;
            overflow-y: hidden;
        }
        
        #treeDemo {
            height: 98%;
            width: 22%;
            /* float: left; */
            left: 0px;
            background-color: white;
            border: 1px solid#dcdcdc;
            margin: 0px 0px 0px 0px;
            /* left: 0px;
            position: absolute; */
            position: absolute;
        }
        
        #PararegulMain {
            height: 98%;
            width: 77%;
            left: 23%;
            /* float: right; */
            border: 2px solid#fcfcfc;
            /* right: 0px;
            position: absolute; */
            position: absolute;
        }
        
        #paper {
            height: 60%;
            width: 100%;
            border: 2px solid #177de4;
            margin: 0px 0px 0px 0px;
            position: absolute;
        }
        
        #PararegulStrategy {
            height: 40%;
            width: 100%;
            background-color: white;
            border: 2px solid #dcdcdc;
            margin: 0px 0px 0px 0px;
            position: absolute;
            top: 60%;
        }
    </style>
</head>

<body>
    <button id="saveInfo">保存</button>
    <div id="PararegulTree">
        <div id="treeDemo" class="ztree"></div>
        <div id="PararegulMain">
            <div id="paper" draggable="false" drop="onDrop" dragover="allowDrop"></div>
            <div id="PararegulStrategy" draggable="false" ondragenter="return false;"></div>
        </div>
    </div>
    <script src="./src/jquery.js"></script>
    <!-- <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> -->
    <script type="text/javascript" src="zTree_v3/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="zTree_v3/js/jquery.ztree.exedit.js"></script>

    <script src="./src/lodash.js"></script>
    <script src="./src/backbone.js"></script>
    <script src="./src/rappid.js"></script>
    <script src="./src/joint.shapes.mapping.js"></script>

    <script src="./src/joint.anchors.mapping.js"></script>
    <script src="./src/joint.routers.mapping.js"></script>
    <script src="./src/joint.linkTools.mapping.js"></script>
    <script src="./src/data-mapping.js"></script>
    <!-- <script src="./src/example.js"></script>
    <script src="./src/auto-scale.js"></script> -->
</body>

</html>

<script>
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        callback: {
            //onDrag: zTreeOnDrag,
            onDrop: zTreeOnDrop,
        },
        edit: {
            enable: true,
            showRemoveBtn: false,
            showRenameBtn: false,
            drag: {
                isCopy: false,
                isMove: true,
                prev: true,
                next: true,
                inner: true,
            }
        },
        data: {
            key: {
                url: "key",
                name: "title"
            }
        }
    };
    var zNodes = [],
        newCount = 1,
        log, className = "dark";
    //加载资源
    $.ajax({
        url: 'http://192.168.60.5:8700/define/rest/param-rule/Tree-list?type=output',
        type: "GET",
        async: false,
        success: function(res) {
            zNodes = res;
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes)
        }
    });
    //拖动node节点
    function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
        //将拖拽的算子添加到传参算子数组
        var id = getQueryParameter("key");
        var operatorInfo = {};
        $.ajax({
            url: 'http://192.168.60.5:8700/define/rest/param-rule/' + id.replaceAll("\"", ""),
            type: "GET",
            async: false,
            success: function(res) {
                operatorInfo = res;
                if (res.outOperatorIds == null) {
                    res.outOperatorIds = [];
                }
                if (res.outOperatorNames == null) {
                    res.outOperatorNames = [];
                }
                res.outOperatorIds.push(treeNodes[0].key);
                res.outOperatorNames.push(treeNodes[0].title);
                operatorInfo.outOperatorIds = res.outOperatorIds;
                operatorInfo.outOperatorNames = res.outOperatorNames;
                $.ajax({
                    url: 'http://192.168.60.5:8700/define/rest/param-rule',
                    data: JSON.stringify(operatorInfo),
                    type: "POST",
                    async: false,
                    contentType: 'application/json;charset=utf-8',
                    dataType: "json",
                    success: function(res) {
                        //显示到地图
                        var order = new joint.shapes.mapping.Record({
                            items: [
                                [{
                                    id: treeNodes[0].key,
                                    label: treeNodes[0].title,
                                    highlighted: true,
                                    icon: null,
                                    items: treeNodes[0].items,
                                }, ],
                            ],
                        });
                        order.setName(treeNodes[0].title);
                        order.position(event.offsetX, event.offsetY);
                        order.addTo(graph);
                    },
                    error: function(ex) {
                        alert("保存失败！");
                    }
                });
            },
            error: function(ex) {
                //alert(ex.responseJSON);
            },
        });

    };
    //解析url，获取key值
    function getQueryParameter(name) {
        var txt = decodeURIComponent(window.location.search);
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var analyArr = txt.substr(1).match(reg); //去掉？号，匹配
        if (analyArr != null) {
            return analyArr[2];
        } else {
            return "解析失败！";
        }
    };
    var key = getQueryParameter("key");
    initele(key);

    function initele(key) {
        $.ajax({
            url: 'http://192.168.60.5:8700/define/rest/param-rule/' + key.replaceAll("\"", ""),
            type: "GET",
            async: false,
            success: function(res) {
                if (res.content == null) {
                    $.ajax({
                        url: 'http://192.168.60.5:8700/define/rest/param-rule/Tree-list/one/?type=input&id=' + res.inOperatorId.replaceAll("\"", ""),
                        type: "GET",
                        async: false,
                        success: function(res) {
                            var rect = new joint.shapes.mapping.Record({
                                items: [
                                    [{
                                        id: res.key,
                                        label: res.title,
                                        highlighted: true,
                                        icon: null,
                                        items: res.items,
                                    }, ],
                                ],
                            });
                            rect.setName(res.title);
                            rect.position(700, 150);
                            rect.addTo(graph);
                        },
                        error: function(ex) {},
                    });
                    var ycoord = 20;
                    if (res.outOperatorIds) {
                        for (var i = 0; i < res.outOperatorIds.length; i++) {
                            $.ajax({
                                url: 'http://192.168.60.5:8700/define/rest/param-rule/Tree-list/one/?type=output&id=' + res.outOperatorIds[i].replaceAll("\"", ""),
                                type: "GET",
                                async: false,
                                success: function(res) {
                                    var rect = new joint.shapes.mapping.Record({
                                        items: [
                                            [{
                                                id: res.key,
                                                label: res.title,
                                                highlighted: true,
                                                icon: null,
                                                items: res.items,
                                            }, ],
                                        ],
                                    });
                                    rect.setName(res.title);
                                    rect.position(100, ycoord);
                                    rect.addTo(graph);
                                },
                                error: function(ex) {},
                            });
                            ycoord += 100;
                        }
                    }
                } else {
                    var res = JSON.parse(res.content);
                    //console.log(res);
                    var recordArr = {};
                    if (res.Record) {
                        for (var i = 0; i < res.Record.length; i++) {
                            var rect = new joint.shapes.mapping.Record({
                                items: [
                                    [res.Record[i].items[0], ],
                                ],
                            });
                            rect.setName(res.Record[i].items[0].label);
                            rect.position(res.Record[i].position.x, res.Record[i].position.y);
                            rect.addTo(graph);
                            var map = {};
                            recordArr[res.Record[i].eid] = rect;
                        }
                    }
                    if (res.Link) {
                        var links = [];
                        //console.log(recordArr);
                        for (var i = 0; i < res.Link.length; i++) {
                            console.log(res.Link[i].source.id);
                            console.log(recordArr[res.Link[i].source.id]);
                            var link = new joint.shapes.mapping.Link({
                                // source: res.Link[i].source,
                                // target: res.Link[i].target,
                                source: {
                                    id: recordArr[res.Link[i].source.id].id,
                                    port: res.Link[i].source.port
                                },
                                target: {
                                    id: recordArr[res.Link[i].target.id].id,
                                    port: res.Link[i].target.port
                                },
                            });
                            links.push(link);
                        }
                        links.forEach(function(link) {
                            link.addTo(graph);
                        });
                    }
                }
            },
            error: function(ex) {
                //alert(ex.responseJSON);
            },
        });
    };
    //Array的原型上删除方法
    Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
</script>